/**
* @description: 人员分工
* @author: wqn-zhoahui
* @data:2023年6月21日
* @remark:
**/

<template>
	<view class="division">
		<nav-bar title="人员分工" @goBack="goBack"></nav-bar>
		<view class="main">
			<view class="title">
				<text>人员分工</text>
			</view>
			<van-form ref="userForm" v-if="ryfgData.length > 0">
				<view class="main-content" v-for="(item,index) in ryfgData" :key="index">
					<view class="content-top">
						<img style="width: 22px;height: 22px;"
							src="../../../../static/standardizedOperationImg/zxckBlue.png" alt="">
						<text>{{ item.workXm }}</text>
					</view>
					<view class="content-form">
						<van-field v-model="item.chargePerson" is-link placeholder="请选择" required label="责任人" readonly
							:rules="[{ required: true,trigger:'onChange', message: '' }]" input-align="right"
							@click="userChange(item,'责任人')" />
						<van-field disabled label="作业成员" required input-align="right" />
						<van-field v-model="item.classPerson" is-link placeholder="请选择" label="班组成员" readonly
							:rules="(item.classPerson !=='' || item.outsidePerson !=='') ?[]:[{ required: true,trigger:'onChange', message: '' }] "
							input-align="right" @click="userChange(item,'班组成员')" />
						<van-field v-model="item.outsidePerson" label="外部厂商成员" is-link readonly placeholder="请选择"
							:rules="(item.classPerson!=='' || item.outsidePerson!=='') ?[] :[{ required: true,trigger:'onChange', message: '' }]"
							input-align="right" @click="userChange(item,'外部厂商成员')" />
					</view>
				</view>
			</van-form>
			<van-empty v-if="ryfgData.length === 0" description="暂无数据" />

		</view>
		<view class="verify">
			<van-button v-if="initDataParam.flowState !=='2'" type="info" round @click="affirmClick">确认</van-button>
		</view>
		<!--选择人员-->
		<van-popup v-model="showSelectUser" position="right">
			<selectUser ref="selectUsers" :selectStatus="selectStatus" :equIds="equIds" :selected.sync="staffList" @cancel="showSelectUser = false"
				:roleId="executiveRoleId" @comfirm="userComfirm" />
		</van-popup>
		<!--选择外商人员-->
		<van-popup v-model="showSelectExternalUser" position="right">
			<selectExternalUser ref="selectExternalUsers" :equIds="ExternalUserIds" :selected.sync="ExternalUserList"
				@cancel="showSelectExternalUser = false" :roleId="ExternalUserRoleId" @comfirm="userExternalComfirm" />
		</van-popup>
	</view>
</template>

<script>
	import NavBar from "../../../standardizedOperation/common/navBar.vue";
	import selectUser from "../../../standardizedOperation/common/selectUser.vue"
	import selectExternalUser from "../../../standardizedOperation/common/selectExternalUser.vue"
	import {
		Dialog,
		Toast
	} from "vant";
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "index",
		components: {
			NavBar,
			selectUser,
			selectExternalUser,
		},
		data() {
			return {
				ryfgData: [],
				staffList: {}, //选择人员数据
				showSelectUser: false, //人员选择
				executiveRoleId: "",
				equIds: [], //人员id
				ExternalUserList: {}, //选择外商人员数据
				showSelectExternalUser: false, //外商人员选择
				ExternalUserRoleId: "",
				ExternalUserIds: [], //外商人员id
				initDataParam: {},
				selectUserId: "", //记录点击的人员分工item的id
				setectUserTag: "", //记录点击的人员分工item是责任人/班组成员/外部厂商人员
				paramList: [], //上传数据
				selectStatus:"checkbox",//负责人单选   班组成员多选
			}
		},
		/**
		 * @param {Object} option
		 * flowState=2已完成
		 */
		onLoad(option) {
			this.initDataParam = JSON.parse(decodeURIComponent(option.message))
			if (this.initDataParam.flowState === "2") {
				this.initDataDetail()
			} else {
				this.initData()
			}
		},
		computed: {
			...mapGetters(["userData"])
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			initData() {
				this.$apiRequest.bzhzyApi.personneldivisionviwe({
					workPlanId: this.initDataParam.id,
					consultationDeductionId: this.initDataParam.objId
				}).then(res => {
					this.ryfgData = res.data
					this.ryfgData.map(item => {
						//责任人
						// item.chargePerson = this.userData.userName
						// item.chargePersonId = this.userData.userId
						item.chargePerson = item.personnellist6
						item.chargePersonId = item.personnellistId6
						//班组成员
						item.classPerson = item.personnellist7
						item.classPersonId = item.personnellistId7
						//外部厂商人员
						item.outsidePerson = item.personnellist8
						item.outsidePersonId = item.personnellistId8
					})
				})
			},
			initDataDetail() {
				this.$apiRequest.bzhzyApi.selectpersonneldivision({
					workPlanId: this.initDataParam.id,
					consultationDeductionId: this.initDataParam.objId
				}).then(res => {
					this.ryfgData = res.data
					this.ryfgData.map(item => {
						//责任人
						item.chargePerson = item.personnellist6 ? item.personnellist6 : "-"
						//班组成员
						item.classPerson = item.personnellist7 ? item.personnellist7 : "-"
						//外部厂商人员
						item.outsidePerson = item.personnellist8 ? item.personnellist8 : "-"
					})
				})
			},
			affirmClick() {
				this.$refs.userForm.validate().then(() => {
					this.paramList = []
					this.ryfgData.forEach(item => {
						this.paramList.push({
							workPlanId: this.initDataParam.id,
							consultationDeductionId: this.initDataParam.objId,
							operatingItemId: item.workXmId,
							operatorId: item.chargePersonId,
							discussers7: item.classPersonId,
							discussers8: item.outsidePersonId
						})
					})
					Dialog.confirm({
							message: '提交后不可修改，是否确定提交？',
							confirmButtonColor: "#417adc",
						})
						.then(() => {
							// on confirm
							this.$apiRequest.bzhzyApi.personneldivision(this.paramList).then(res => {
								Toast(res.msg)
								this.back()
							})

						})
						.catch(() => {
							// on cancel
						});
				})

			},
			/**
			 * 工作负责人选择
			 */
			userComfirm() {
				this.showSelectUser = false
				this.ryfgData.map(item => {
					if (item.workXmId === this.selectUserId && this.setectUserTag === "责任人") {
						item.chargePerson = this.staffList.text
						item.chargePersonId = this.staffList.ids.join()
					} else if (item.workXmId === this.selectUserId && this.setectUserTag === "班组成员") {
						item.classPerson = this.staffList.text
						item.classPersonId = this.staffList.ids.join()
					} else if (item.workXmId === this.selectUserId && this.setectUserTag === "外部厂商成员") {
						item.outsidePerson = this.staffList.text
						item.outsidePersonId = this.staffList.ids.join()
					}
				})
			},
			/**
			 * 外部厂商成员选择
			 */
			userExternalComfirm() {
				if (this.initDataParam.flowState !== '2') {
					this.showSelectExternalUser = false
					this.ryfgData.map(item => {
						if (item.workXmId === this.selectUserId && this.setectUserTag === "外部厂商成员") {
							item.outsidePerson = this.ExternalUserList.text
							item.outsidePersonId = this.ExternalUserList.ids.join()
						}
					})
				}
			},
			userChange(item, tag) {
				if (this.initDataParam.flowState !== '2') {
					this.selectUserId = item.workXmId
					this.setectUserTag = tag
					if (this.setectUserTag === "外部厂商成员") {
						this.showSelectExternalUser = true
						// if (this.$refs['selectExternalUsers']) {
						// 	this.$refs['selectExternalUsers'].clear()
						// }
						this.ExternalUserList = {
							text: item.outsidePerson,
							ids: item.outsidePersonId
						}
					} else if (this.setectUserTag === "班组成员") {
						this.showSelectUser = true
						this.selectStatus = 'checkbox'
						// if (this.$refs['selectUsers']) {
						// 	this.$refs['selectUsers'].clear()
						// }
						this.staffList = {
							text: item.classPerson,
							ids: item.classPersonId
						}
					} else if (this.setectUserTag === "责任人") {
						this.showSelectUser = true
						this.selectStatus = 'radio'
						// if (this.$refs['selectUsers']) {
						// 	this.$refs['selectUsers'].clear()
						// }
						this.staffList ={}
						this.staffList = {
							text: item.chargePerson,
							ids: item.chargePersonId
						}
					}
				}
			},
			/**
			 * 通知上一个页面刷新数据
			 */
			back() {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2] //上一个页面
				prevPage.isRefresh = true
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.division {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background: #F2F6FA;
		overflow: hidden;

		.main {
			flex: 1;
			overflow: scroll;
			padding: px2vh(30);
			box-sizing: border-box;

			text {
				font-weight: bold;
				font-size: px2vh(40);
				color: #666666;
			}

			.title {
				margin-bottom: px2vh(30);
			}

			.main-content {
				background: #FFFFFF;
				border-radius: px2vh(20);
				overflow: hidden;
				margin-bottom: px2vh(30);
				box-sizing: border-box;

				.content-top {
					display: flex;
					align-items: center;
					padding: px2vh(30) px2vh(20);

					text {
						font-size: px2vh(42);
						margin-left: px2vh(18);
					}
				}

				.content-form {
					padding-left: px2vw(30);
				}
			}

		}

		.verify {
			width: 100%;
			padding: px2vh(30);
			box-sizing: border-box;

			.van-button--normal {
				width: 100%;
				height: px2vh(120);
				font-size: px2vh(46);
				background: #417ADC;
				border: 1px solid #417ADC;
			}
		}
	}
</style>
